<template>
	<view>
		<!-- 顶部组件 -->
		<u-navbar :background="navBar.top_bgc" :border-bottom="navBar.border" :back-icon-color="navBar.iconColor" id="nav-bar" :title="navBar.title" title-color="#fff"></u-navbar>
		<!-- 顶部背景 -->
		<view class="top-bg"></view>
		<!-- 页面标题 -->
		<view class="page-title">
			<image class="main" src="https://img.youpin.mi-img.com/jianyu/5ce7df818fb6bf1069739d998fbaed7d.png"></image>
			<image class="sub" src="https://img.youpin.mi-img.com/jianyu/b774e92071208d8e599d148f4712aab0.png"></image>
		</view>
		<!-- 轮播部分 -->
		<swiper class="banner" :indicator-dots="false" :autoplay="false" :duration="200" @change="swiperChange" circular>
			<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper-wrap">
				<view class="u-list-image-wrap" :style="{ transform: swiperCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)' }">
					<image class="img" :src="item.banner_pic_url"></image>
					<image class="mask" src="https://img.youpin.mi-img.com/jianyu/f2605bda36b9755265fc9e0e83eca6f5.png"></image>
					<view class="title">
						<view class="main"># {{ item.title }}</view>
						<view class="sub">{{ item.sub_title }}</view>
					</view>
					<view class="recommend-img"></view>
					<view class="goods-box u-flex">
						<image :src="img.img800s" v-for="(img, sindex) in item.goods_list" :key="sindex" v-if="sindex < 3" @click="goToGoodsDetail(img.gid)"></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 广告banner图 -->
		<view class="custom-img">
			<image :src="item.url" v-for="(item, index) in customImgList" :key="index" :style="{ height: (item.height * 750) / item.width + 'rpx' }"></image>
		</view>
		<!-- 想要 -->
		<view class="want" v-if="wantList.length != 0">
			<view class="head u-flex">
				<view class="title u-flex">
					<text>想要</text>
					<text class="sub">标记想要 降价提醒</text>
				</view>
				<view class="random u-flex" @click="randomArray">
					<u-icon name="reload" custom-prefix="custom-icon"></u-icon>
					<text>换一批</text>
				</view>
			</view>
			<view class="goods-list u-flex">
				<view class="item" v-for="(item, index) in wantList" :key="index" v-if="index < 3" @click="goToGoodsDetail(item.gid)">
					<view class="goods-img"><image :src="item.img800s"></image></view>
					<view class="title u-line-1">{{ item.name }}</view>
					<view class="price">
						<text>￥</text>
						<text class="price-min">{{ item.price_min / 100 }}</text>
						<text class="spec" v-if="item.price_tag">起</text>
					</view>
					<view class="btn u-flex" :class="{ active: item.like_status.is_like }" @click.stop="likeGoods(item.like_status)">
						<image :src="item.like_status.is_like | btnImg"></image>
						<text>{{ item.like_status.like_num }}标记</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 瀑布流商品 -->
		<view class="waterfall">
			<view class="goods-cat " :style="{ top: navBar.height + 'px' }">
				<u-tabs
					:list="goodsCateList"
					:is-scroll="true"
					:current="goodsCurrentIndex"
					:duration="0.2"
					:gutter="80"
					name="title"
					font-size="32"
					bg-color="#232326"
					active-color="#fcdec9"
					inactive-color="#fcdec9"
					:bar-style="{ height: '8rpx' }"
					@change="changeGoodsCate"
				></u-tabs>
				<!-- <view class="item" :class="{ active: index == goodsCurrentIndex }" v-for="(item, index) in goodsCateList" :key="index" @click="changeGoodsCate(index)">
					<view>{{ item.title }}</view>
				</view> -->
			</view>
			<view class="goods-list">
				<view
					class="item"
					v-for="(item, index) in goodsList"
					:key="index"
					:class="{ xinqi: item.plan_type == 5, jiangxin: item.plan_type == 6, sheji: item.plan_type == 7 }"
				>
					<view class="goods-box u-flex" @click="goToGoodsDetail(item.gid)">
						<image class="goods-img" :src="item.img800s"></image>
						<view class="detail u-flex-col">
							<view class="title u-line-1">{{ item.attr_ext.custom_name }}</view>
							<view class="subtitle u-line-2">{{ item.summary }}</view>
							<view class="label-box u-flex" v-if="item.labels.length != 0">
								<view class="label" v-for="(litem, lindex) in item.labels" :key="lindex" :style="{ background: litem.attr.bg_color }">{{ litem.attr.text }}</view>
							</view>
							<view class="price u-flex">
								<text>￥{{ item.price_min / 100 }}</text>
								<text class="spec" v-if="item.price_tag">起</text>
								<view class="like u-flex">
									<text>{{ item.like_status.like_num }}人想要</text>
									<view class="like-icon u-flex" @click.stop="likeGoods(item.like_status)"><image :src="item.like_status.is_like | likeIcon"></image></view>
								</view>
							</view>
						</view>
					</view>
					<view class="content u-flex" @click="goToContentDetail(item.content.content_id)">
						<text>{{ item.plan_type | contentType }}：</text>
						<text>{{ item.content.title }}</text>
					</view>
					<view class="type-label"><image :style="{ width: item.plan_type == 5 ? '104rpx' : '80rpx' }" :src="item.plan_type | goodsType"></image></view>
				</view>
			</view>
		</view>
		<view class="more u-flex" v-if="goodsList.length != 0">
			<view class="line"></view>
			<view>更多好物，敬请期待</view>
			<view class="line"></view>
		</view>
		<mi-toast ref="miToast"></mi-toast>
		<full-loading :show="fullLoading"></full-loading>
		<full-loading :show="changeCateLoading" :top="60"></full-loading>
	</view>
</template>
<style lang="scss">
.more {
	justify-content: space-between;
	padding: 30rpx 200rpx 80rpx;
	height: 100rpx;
	font-size: 26rpx;
	color: #999;
	.line {
		height: 2rpx;
		width: 50rpx;
		background-color: rgba(153, 153, 153, 0.8);
	}
}
</style>
<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			navBar: {
				top_bgc: {
					background: 'transparent'
				},
				border: false,
				title: '',
				height: 0,
				iconColor: '#fff'
			},
			swiperList: [],
			swiperCurrent: 0,
			customImgList: [],
			wantList: [],
			goodsCateList: [],
			goodsList: [],
			goodsCurrentIndex: 0,
			fullLoading: true,
			changeCateLoading: false
		}
	},
	onLoad() {
		this.getData()
		this.getViewHeight()
	},
	methods: {
		getData() {
			this.$u.api.best100().then(res => {
				// console.log(res)
				this.fullLoading = false
				this.disposeData(res.floors)
			})
		},
		disposeData(item) {
			item.forEach((x, i) => {
				switch (x.module_key) {
					case 'quality_banner': // banner
						item[i].data.result.list = item[i].data.result.list.splice(0, 6)
						this.swiperList = []
						this.swiperList = item[i].data.result.list
						break
					case 'interactive_3': // 想要
						this.wantList = item[i].data.result.list
						break
					case 'waterfall_tab': // 瀑布流分类
						this.goodsCateList = item[i].data.tabs
						this.goodsList = item[i].data.tabs[0].result.list
						break
					case 'custom_image': // 自定义图片
						if (this.customImgList.length < 2) {
							this.customImgList.push(item[i].data.image_info)
						}
					// break
				}
			})
			// console.log('请求了一次')
			if (!this.goodsList[0].content) return this.getData()
		},
		randomArray() {
			this.$u.randomArray(this.wantList)
		},
		likeGoods(status) {
			if (!status.is_like) {
				status.like_num++
				this.$refs.miToast.show({
					title: '标记成功',
					type: 'success'
				})
			} else {
				status.like_num--
			}
			status.is_like = !status.is_like
		},
		getClassName(type) {
			if (type == 6) {
				return 'jiangxin'
			} else if (type == 7) {
				return 'sheji'
			} else {
				return 'xinqi'
			}
		},
		changeGoodsCate(index) {
			if (this.goodsCurrentIndex == index) return
			this.changeCateLoading = true
			this.goodsCurrentIndex = index
			this.goodsList = []
			this.getGoodsList()
		},
		getGoodsList() {
			this.$u.api
				.bestGoods(this.goodsCateList[this.goodsCurrentIndex].query.body)
				.then(res => {
					if (!res.data.list[0].content) return this.getGoodsList()
					this.goodsList = res.data.list
					this.changeCateLoading = false
				})
				.catch(err => {
					console.log(err)
					this.changeCateLoading = false
					this.$refs.miToast.show({
						title: '获取数据失败，请重试',
						type: 'error'
					})
				})
		},
		goToGoodsDetail(gid) {
			uni.navigateTo({
				url: '../../shop/goods/detail/detail?gid=' + gid
			})
		},
		goToContentDetail(uuid) {
			uni.navigateTo({
				url: '../../life/detail/detail?uuid=' + uuid
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBar.height = data.height
				})
				.exec()
		},
		swiperChange(e) {
			this.swiperCurrent = e.detail.current
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > this.navBar.height) {
			this.navBar.top_bgc.background = '#232326'
			this.navBar.title = 'BEST'
		} else {
			this.navBar.top_bgc.background = 'transparent'
			this.navBar.title = ''
		}
	},
	filters: {
		btnImg(is_like) {
			if (is_like) {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90f32f30-af12-11ea-8ff1-d5dcf8779628.png'
			} else {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90f3a460-af12-11ea-a30b-e311646dfaf2.png'
			}
		},
		likeIcon(is_like) {
			if (is_like) {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90fddd90-af12-11ea-8ff1-d5dcf8779628.png'
			} else {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/91000070-af12-11ea-8bd0-2998ac5bbf7e.png'
			}
		},
		contentType(type) {
			if (type == 6) {
				return '匠心故事'
			} else if (type == 7) {
				return '设计师说'
			} else {
				return '新奇酷说'
			}
		},
		goodsType(type) {
			if (type == 6) {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90f61560-af12-11ea-8ff1-d5dcf8779628.png'
			} else if (type == 7) {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90fccc20-af12-11ea-b244-a9f5e5565f30.png'
			} else {
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/90ff8b40-af12-11ea-b244-a9f5e5565f30.png'
			}
		}
	},
	components: {
		fullLoading
	}
}
</script>

<style lang="scss">
page {
	background-color: #232326;
}
.top-bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 600rpx;
	background: url('https://img.youpin.mi-img.com/jianyu/f122d04938f2a4745b94b38b1f84ea51.png@base@tag=imgScale&h=600&w=750') no-repeat center / 100% 100%;
	z-index: -1;
}
.page-title {
	text-align: center;
	.main {
		width: 230rpx;
		height: 68rpx;
	}
	.sub {
		margin-top: 20rpx;
		width: 750rpx;
		height: 48rpx;
	}
}
.banner {
	margin-top: 30rpx;
	height: 780rpx;
	.swiper-wrap {
		padding-left: 30rpx;
		height: inherit;
		width: 634rpx !important;
		.u-list-image-wrap {
			position: relative;
			width: 100%;
			height: 100%;
			transition: all 0.2s;
			.img,
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 634rpx;
				height: 780rpx;
				border-radius: 24rpx;
			}
			.img {
				z-index: -2;
			}
			.mask {
				z-index: -1;
			}
		}
		.title {
			position: relative;
			top: 480rpx;
			left: 32rpx;
			color: #fff;
			font-size: 40rpx;
			z-index: 2;
			.main {
				font-weight: bold;
			}
			.sub {
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
		.recommend-img {
			position: absolute;
			bottom: 56rpx;
			left: 32rpx;
			z-index: 2;
			width: 96rpx;
			height: 114rpx;
			background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/38872d90-aedd-11ea-b43d-2358b31b6ce6.png') no-repeat center / 100% 100%;
		}
		.goods-box {
			position: absolute;
			bottom: 40rpx;
			right: 40rpx;
			z-index: 2;
			justify-content: space-between;
			height: 120rpx;
			width: 410rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 12rpx;
			}
		}
	}
}
.custom-img {
	margin-top: 30rpx;
	width: 750rpx;
	image {
		margin-bottom: 20rpx;
		width: 750rpx;
	}
}
.want {
	margin: 0 auto 20rpx;
	padding: 24rpx 30rpx 60rpx;
	width: 702rpx;
	border-radius: 12rpx;
	background-color: #fff;
	.head {
		.title {
			width: 350rpx;
			font-size: 36rpx;
			color: #303133;
			font-weight: bold;
			background: linear-gradient(to right, rgba(254, 223, 191, 0.6), rgba(254, 223, 191, 0)) bottom no-repeat / 100% 16rpx;
			.sub {
				font-size: 26rpx;
				font-weight: normal;
				margin-left: 18rpx;
			}
		}
		.random {
			margin-left: auto;
			font-size: 26rpx;
			text {
				margin-left: 6rpx;
				line-height: 48rpx;
			}
		}
	}
	.goods-list {
		margin-top: 20rpx;
		justify-content: space-between;
		.item {
			position: relative;
			padding: 18rpx 0 32rpx;
			width: 204rpx;
			border-radius: 12rpx;
			background-color: #f7f7f7;
			.goods-img {
				padding: 0 17rpx;
				width: 204rpx;
				height: 166rpx;
				image {
					width: 166rpx;
					height: 166rpx;
				}
			}
			.title {
				padding: 0 10rpx;
				text-align: center;
				color: #494a4d;
				font-size: 24rpx;
			}
			.price {
				margin-top: 6rpx;
				text-align: center;
				color: #303133;
				font-weight: bold;
				font-size: 26rpx;
			}
			.btn {
				position: absolute;
				justify-content: center;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 50%);
				width: 178rpx;
				height: 52rpx;
				color: #fff;
				font-size: 26rpx;
				line-height: 52rpx;
				border-radius: 26rpx;
				border: 1rpx solid transparent;
				background: linear-gradient(to right, rgb(0, 149, 255), rgb(0, 106, 255));
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.active {
				border-color: rgb(0, 139, 255);
				color: rgb(0, 139, 255);
				background: transparent;
			}
		}
	}
}
.goods-cat {
	position: sticky;
	height: 108rpx;
	width: 750rpx;
	background-color: #232326;
	z-index: 1;
	padding-bottom: 20rpx;
	.item {
		flex: 1;
		font-size: 32rpx;
		color: #8c8075;
		text-align: center;
		transition: 0.1s;
	}
	.active {
		position: relative;
		font-size: 36rpx;
		color: #fcdec9;
		font-weight: bold;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 16rpx);
			width: 28rpx;
			height: 6rpx;
			background-color: #fcdec9;
		}
	}
}
.waterfall .goods-list {
	margin-top: 10rpx;
	padding: 0 24rpx;
	min-height: 90vh;
	.item {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		background: linear-gradient(to right, rgb(63, 63, 69), rgb(75, 75, 82));
		.goods-box {
			padding: 30rpx 30rpx 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.goods-img {
				width: 240rpx;
				height: 240rpx;
				min-width: 240rpx;
			}
			.detail {
				padding-left: 20rpx;
				height: 240rpx;
				color: #303133;
				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
				.subtitle {
					margin-top: 4rpx;
					max-width: 382rpx;
					font-size: 26rpx;
					color: #797b80;
				}
				.label-box {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #fff;
					.label {
						margin-right: 10rpx;
						padding: 0 8rpx;
					}
				}
				.price {
					margin-top: auto;
					width: 382rpx;
					color: #303133;
					font-weight: bold;
					font-size: 32rpx;
					.spec {
						font-weight: normal;
						font-size: 28rpx;
					}
					.like {
						margin-left: auto;
						color: #006cff;
						font-size: 26rpx;
						font-weight: normal;
						.like-icon {
							justify-content: center;
							margin-left: 10rpx;
							height: 52rpx;
							width: 52rpx;
							border-radius: 26rpx;
							background-color: rgba(0, 108, 255, 0.05);
							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}
		.content {
			padding-left: 30rpx;
			height: 72rpx;
			font-size: 24rpx;
			color: #f2d6c2;
			text {
				margin-right: 6rpx;
			}
		}
		.type-label {
			position: absolute;
			top: 30rpx;
			left: 0;
			transform: translateX(-6rpx);
			height: 46rpx;
			image {
				width: 80rpx;
				height: 46rpx;
			}
		}
	}
}
.xinqi {
	background: linear-gradient(to right, rgb(63, 63, 69), rgb(75, 75, 82)) !important;
	.content {
		color: #f2d6c2 !important;
	}
}
.jiangxin {
	background: linear-gradient(to right, rgb(254, 210, 165), rgb(254, 223, 191)) !important;
	.content {
		color: #303133 !important;
	}
}
.sheji {
	background: linear-gradient(to right, rgb(51, 77, 128), rgb(61, 92, 153)) !important;
	.content {
		color: #e1e9fa !important;
	}
}
::v-deep .u-tab-item {
	padding: 0 20rpx !important;
}
</style>
